<template>
  <div class="login-page">
    <!-- 登录容器 -->
    <div class="login-box">
      <h2 class="login-title">智能网课管理系统</h2>

      <!-- 登录表单 -->
      <el-form :model="loginForm" label-width="60px" class="login-form">
        <!-- 邮箱输入框 -->
        <el-form-item label="邮箱">
          <el-input
              v-model="loginForm.email"
              placeholder="admin@example.com"
              clearable
          />
        </el-form-item>

        <!-- 密码输入框 -->
        <el-form-item label="密码">
          <el-input
              v-model="loginForm.password"
              type="password"
              placeholder="********"
              clearable
              show-password
          />
        </el-form-item>

        <!-- 登录按钮，使用栅格布局 -->
        <el-form-item>
          <el-row :gutter="20">
            <el-col :span="24" style="display: flex; justify-content: center;">
              <el-button type="primary" @click="handleLogin">登录</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
// 假设你封装的登录接口
import { login } from '../api/user.js'

const router = useRouter()
const loginForm = reactive({
  email: 'root1@example.com',
  password: '123456'
})

// 登录逻辑
const handleLogin = async () => {
  try {
    const res = await login(loginForm)
    if (res.code === 1) {
      // 登录成功，存储状态（无 token 场景）
      localStorage.setItem('isLoggedIn', 'true')
      ElMessage.success('登录成功')
      router.push('/dashboard') // 跳转到首页
    } else {
      ElMessage.error(res.message || '登录失败')
    }
  } catch (error) {
    ElMessage.error('网络异常，请重试')
  }
}
</script>

<style scoped>
/* 页面基础样式 */
.login-page {
  width: 100%;
  height: 100vh;
  background-color: #eaf5ff; /* 浅蓝色背景 */
  display: flex;
  justify-content: center;
  /* 让登录框整体稍向上移，可根据需求调整 translateY 的值 */
  align-items: flex-start;
  padding-top: 200px;
}

/* 登录容器 */
.login-box {
  width: 400px; /* 增大登录框宽度 */
  padding: 50px 40px; /* 增大内边距，让登录框更高大 */
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  text-align: center;
  /* 让登录框在垂直方向居中（配合父级的 align-items 和 padding-top 微调） */
  margin: 0 auto;
}

/* 标题样式 */
.login-title {
  font-size: 30px; /* 增大标题字体 */
  font-weight: 700;
  margin-bottom: 40px;
  color: #303133;
}

/* 副标题样式 */
.login-subtitle {
  font-size: 14px;
  color: #909399;
  margin-bottom: 40px; /* 增大与表单的间距 */
}

/* 表单项间距 */
.el-form-item {
  margin-bottom: 30px; /* 增大表单项之间的间距 */
}

/* 输入框样式优化 */
.el-input {
  width: 100%;
  height: 50px; /* 增大输入框高度 */
  font-size: 16px; /* 增大输入框字体 */
}

/* 让登录按钮居中 */
.center-button {
  display: flex;
  justify-content: center;
}

/* 登录按钮样式优化 */
.el-button--primary {
  width: 120px; /* 可根据需求调整按钮宽度 */
  height: 44px; /* 增大按钮高度 */
  font-size: 16px; /* 增大按钮字体 */
}
</style>